<template>
	<div class="qy-page-signin">
		<div class="signin-wrap default-img">
			<div class="signin-box">
				<div class="signin-name">让企业培训更简单</div>
				<div class="signin-input-wrap">
					<div class="input-group flex-wrap flex-middle" :class="{active: accountStatus}">
						<input v-model="account" class="input-wrap" placeholder="账号" @focus="accountStatus = true"
							@blur="accountStatus = false">
					</div>
					<div class="input-group flex-wrap flex-middle" :class="{active: passwordStatus}">
						<input v-model="password" type="password" class="input-wrap" placeholder="密码"
							@focus="passwordStatus = true" @blur="passwordStatus = false">
					</div>
					<button class="signin-button form-confirm-btn" :disabled="!showSigninBtn" @click="handleSignin"
						:loading="btnLoading" type="primary">{{ btnName }}</button>
					<div class="signin-desc default-desc ac flex-wrap flex-text-mid flex-center">
						<van-checkbox-single v-model="checkRead" shape="square" />
						<span @click="checkRead = true">阅读并同意</span>
						<span class="default-link small" @click="toPage('/pages/signin/privacy')">《用户隐私政策》</span>
						<span class="default-link small" @click="toPage('/pages/signin/serve')">《服务协议》</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex'
	import signinDefaultBg from '@/static/image/login-bg.png'
	import validate from '@/assets/js/validate'
	import {
		guid,
		decryptByDES,
		parse,
		stringify,
		setSysToken,
		setCookie,
		setTab,
		handleVersion
	} from '@/assets/js/util'
	import {
		SALT_DES_KEY,
		USER_LOCAL_KEY,
		MS2_PUBLICKEY
	} from '@/assets/js/constant'
	import {
		sm2
	} from 'sm-crypto'
	import VanCheckbox from "@/components/vant/van-checkbox/van-checkbox.vue";
	import VanCheckboxSingle from "@/components/vant/van-checkbox-single/van-checkbox-single.vue";
	const cipherMode = 1 // 1 - C1C3C2，0 - C1C2C3，默认为1
	export default {
		components: {
			VanCheckboxSingle,
			VanCheckbox
		},
		layout: 'empty',
		head: function() {
			return {
				title: '登录',
				isIe: false,
			}
		},
		data: function() {
			return {
				signinDefaultBg,
				logoName: '',
				logoImgName: '',
				bgImgUrl: '',
				account: '',
				password: '',
				valiSite: false,
				valiCode: '',
				valiCodeUUID: '',
				phoneNumber: '',
				phoneValiCode: '',
				btnLoading: false,
				btnName: '登录',
				valiCodeImg: null,
				showMessageBtn: true,
				accountStatus: false,
				passwordStatus: false,
				phoneNumberStatus: false,
				valiCodeStatus: false,
				phoneValiCodeStatus: false,
				leftSendSeconds: 60,
				activeSigninType: 2, // 登录方式 1：短信登录 2.账号登录
				redirectUrl: '',
				siteLoginNeedVericode: '1',
				fillType: 'auto',
				isShowLogo: '1',
				rootSite: '',
				wxOpenId: '',
				checkRead: false,
				siteStatus: false
				// checked: false,

			}
		},
		computed: {
			showSigninBtn() {
				return this.account && this.password
			}
		},
		methods: {
			handleSignin() {
				if (this.account.length === 0) {
					this.$toast.fail('请填写账号')
					return
				}
				if (this.password.length === 0) {
					this.$toast.fail('请填写密码')
					return
				}
				if (!this.checkRead) {
					this.$toast.fail('请阅读并同意《用户隐私政策》《服务协议》')
					return
				}
				this.btnLoading = true
				this.btnName = '登录中...'
				if (this.account == 'admin' && this.password == "admin") {
					this.btnLoading = false;
					this.$toast.success('登录成功')
					this.$uniRedirectTo('/pages/index');
				} else {
					this.$toast.fail('账号密码错误');
					this.btnName = "登录";
					this.btnLoading = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qy-page-signin {
		padding: 0;
		height: 100vh;
		overflow: auto;
		position: relative;

		.signin-wrap {
			overflow: hidden;
			height: 100vh;
			position: relative;
			padding-top: 18vh;

			&.default-img {
				background: url('../../static/image/login-bg.png') center top no-repeat, #1EA69D !important;
				background-size: 100% auto !important;
			}

			.signin-bg {
				background: #F1F9F9;
				text-align: center;
				padding-bottom: 18px;
				position: relative;
				overflow: hidden;
				z-index: 1;
			}

			.signin-name {
				font-size: 14px;
				font-weight: bold;
				color: #333;
				line-height: 10px;
				letter-spacing: 10px;
				text-align: center;
				margin-bottom: 50px;
			}

			.signin-box {
				width: 80%;
				min-height: 300px;
				background: #fff;
				border-radius: 10px;
				margin: 7vh auto 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 70px 20px;

				.signin-top {
					text-align: center;
					position: relative;
					z-index: 2;
				}

				.signin-type {
					margin: 6vh 40px 12px;
					overflow: hidden;
					position: relative;
					z-index: 2;

					.signin-type-icon {
						position: absolute;
						bottom: 0;
						left: 17px;
						width: 56px;
						height: 6px;
						background: linear-gradient(347deg, #1EA69D 0%, #63C0B3 100%);
						opacity: 0.6;
						z-index: -1;
					}

					&.active-1 {
						.signin-type-icon {
							left: 17px;
						}
					}

					&.active-2 {
						.signin-type-icon {
							left: 112px;
						}
					}

					.signin-type-item {
						height: 22px;
						font-weight: 400;
						font-size: 16px;
						color: #9BB5B4;
						line-height: 22px;
						text-align: right;
						font-style: normal;

						&+.signin-type-item {
							margin-left: 24px;
						}

						&.active {
							font-weight: 500;
							font-size: 18px;
							color: #333333;
							text-align: right;
							font-style: normal;
						}
					}
				}

				.signin-input-wrap {
					margin: 0 40px 0;
					width: 100%;
					overflow: hidden;

					&.only {
						width: 100%;
						margin: 0;
						height: calc(100vh - 200px);

						.signin-button {
							width: 200px;
							margin: 0 auto 10px;
						}

						.signin-text {
							text-align: center;
						}
					}
				}
			}
		}

		.signin-logo {
			width: 140px;
			height: 41px;
			position: relative;
		}

		.sys-name {
			font-size: 18px;
			font-weight: 600;
			line-height: 24px;
			letter-spacing: 2px;
			margin-top: 8px;
		}

		.signin-button {
			border-radius: 24px;
			width: 100%;
			height: 48px;
			line-height: 48px;
			margin-top: 30px;
			font-size: 16px;
			background: var(--color);
		}

		.signin-link {
			margin-top: 20px;
			line-height: 20px;

			.signin-link-item {
				font-weight: 400;
				font-size: 15px;
				color: #9BB5B4;
				line-height: 21px;

				&+.signin-link-item {
					&:before {
						content: '|';
						margin: 0 15px;
						color: #9BB5B4;
					}
				}
			}

			.register-box {
				font-size: 12px;
				color: #333;
				text-align: center;

				.register-btn {
					color: var(--color);
					background-color: transparent;
				}
			}
		}

		.signin-desc {
			position: absolute;
			bottom: 8vh;
			width: 100%;
			left: 0;
		}

		.input-control {
			font-size: 16px;
			height: 42px;
			line-height: 42px;
			color: #333;
			padding-top: 12px;
		}

		.input-fill {
			padding-top: 12px;
			width: 100%;
			background: none;
			background: transparent;
		}

		.input-label {
			position: absolute;
			left: 0;
			top: 35px;
			line-height: 22px;
			font-size: 16px;
			color: #98abb5;
			transform-origin: 0 0;
			transition: all 0.3s;
			pointer-events: none;
		}

		.input-control:placeholder-shown::placeholder {
			color: transparent;
		}

		.input-control:not(:placeholder-shown)~.input-label,
		.input-control:focus~.input-label {
			transform: scale(0.8) translateY(-24px);
		}

		.message-btn {
			position: absolute;
			right: 0;
			bottom: 6px;
		}

		.message-tip {
			color: #bbb;
			font-size: 14px;
		}

		.group-title {
			font-size: 13px;
			color: #666666;
			line-height: 18px;
			padding: 20px 0 8px;
		}

		.input-group {
			background: #F6F6F6;
			border-radius: 24px;
			width: 100%;
			height: 48px;
			padding: 0 20px;
			border: 1px solid #EEEEEE;
			overflow: hidden;
			transition: all 0.3s;
			margin-top: 15px;

			&.with-code {
				padding-right: 0;
			}

			&.active {
				border: 1px solid var(--color);
			}

			.input-wrap {
				flex: 1;
				font-size: 15px;
				color: #333;
				line-height: 21px;
				min-width: 50%;
			}

			.valicode {
				width: 130px;
				height: 40px;
			}

			.input-text {
				position: relative;
				font-size: 16px;
				font-weight: 400;
				color: #333333;
				line-height: 22px;
				margin-right: 29px;

				&:after {
					content: '';
					width: 1px;
					height: 16px;
					position: absolute;
					top: 3px;
					right: -15px;
					background: #BBBBBB;
				}
			}
		}

		.default-desc {
			color: #333;
		}

		.default-link {
			font-size: 14px;
			color: #333;
			&.primary {
				color: var(--color);
			}

			&.small {
				font-size: 12px;
			}
		}
	}
</style>